<template>
  <!-- 举报弹框 -->
  <communityReporting
    ref="communityReportingPopRef"
    :postsDetail="postsDetail"
  ></communityReporting>

  <!-- 回复弹框 -->
  <reboundBoxPop
    ref="reboundBoxPopRef"
    :postsDetail="postsDetail"
    @sendConfirm="sendConfirm"
  ></reboundBoxPop>

  <!-- 充电 / 付费弹框 -->
  <rechargePop
    :payPopType="payPopType"
    ref="payPopRef"
    @open="payPopIsOpen = true"
    @close="payPopIsOpen = false"
    :payInfo="postsDetail"
    :postIndex="commentIndex"
    @paySuccess="paySuccess"
  ></rechargePop>

  <div
    class="community-article-item flex"
    :class="{
      'community-article-item-top-border':
        type == 2 && !isReply && commentIndex != 0,
      'community-article-item-comment-padding': type == 2 && !isReply,
    }"
  >
    <userAvatar
      :showDv="postsDetail.user.is_authentication == 1"
      :userImgs="
        postsDetail && postsDetail.user && postsDetail.user.user_avatar
      "
      :imgWidth="type == 2 && isReply ? 36 : 48"
      :divWidth="type == 2 && isReply ? 42 : 54"
      @click="toUserDetailCommunity"
    ></userAvatar>

    <div
      class="community-article-content"
      :style="{ 'padding-left': type == 2 && isReply ? '10px' : '20px' }"
    >
      <div class="community-article-user-info f-j-sb-a-c">
        <div class="community-article-user-info-name f-a-c">
          <span class="user-info-name f-a-c" v-if="postsDetail.user"
            >{{ postsDetail.user.user_name }}

            <!-- 官方 -->
            <svg-icon
              v-if="postsDetail.user.is_official == 1"
              name="icon-guanfang"
              style="margin-left: 5px"
            ></svg-icon>
            <!-- 等级 -->
            <span
              style="
                background-color: #a1efc1;
                font-size: 14px;
                color: #fff;
                padding: 0 5px;
                border-radius: 5px;
                margin-left: 5px;
              "
              >Lv {{ postsDetail.user.lv }}</span
            >
          </span>
          <!-- <svg-icon name="icon-guanfang" class="svg-icon"></svg-icon> -->
          <!-- <svg-icon name="icon-quanzhu" class="svg-icon"></svg-icon> -->

          <!-- item.user_id != items.comment_agent_id -->

          <span
            class="user-info-to-name"
            v-if="type == 2 && postsDetail.comment_agent_name"
            >@{{ postsDetail.comment_agent_name }}</span
          >
        </div>

        <!-- {{userInfo.id}} -->
        <div
          class="f-j-a-c community-btn-class community-btn-default"
          v-if="
            postsDetail.is_follow_user && userInfo && 
            userInfo.id != postsDetail.user.id &&
            type == 1
          "
          @click="postFollowNow"
        >
          已关注
        </div>
        <div
          class="f-j-a-c community-btn-class community-btn-green"
          v-else-if="
            !userInfo ||
            (!postsDetail.is_follow_user &&
              userInfo.id != postsDetail.user.id &&
              type == 1)
          "
          @click="postFollowNow"
        >
          关注
        </div>
      </div>

      <!-- ip -->
      <div class="community-article-user-ip f-a-c">
        <!-- <span>{{ postsDetail.updated_at }}</span> -->
        <span>{{ postsDetail.format_time || postsDetail.created_at }}</span>
        <div class="f-a-c">
          <svg-icon name="icon-ip" class="svg-icon"></svg-icon>
          <span>IP: &nbsp;</span>
          <span>{{ postsDetail.city ? postsDetail.city : "未知" }}</span>
        </div>
      </div>

      <!-- 内容文本 -->
      <div class="community-article-text">
        <span
          v-html="commentText"
          :class="{ ellipsis3: !showMore && isOverFlow }"
          ref="commentTextBox"
        ></span>
        <span
          v-if="isOverFlow"
          class="show-more-text"
          @click="showMore = !showMore"
          >{{ showMore ? "收起" : "阅读全文" }}</span
        >
      </div>

      <!-- 投票内容(帖子) -->
      <div
        class="community-vote-box"
        v-if="type == 1 && postsDetail.vote && postsDetail.vote.vtList"
      >
        <div class="vote-list">
          <div
            class="vote-item f-j-sb-a-c"
            v-for="(item, index) in postsDetail.vote.vtList"
            :class="{ 'vote-item-active': item.selected }"
            @click="postUserVote(postsDetail.vote, item)"
          >
            <div class="vote-item-title">
              <span>{{ item.title }}</span>
              <svg-icon
                name="icon-tp-gx"
                class="svg-icon"
                v-if="item.selected"
              ></svg-icon>
            </div>
            <div class="vote-item-num">
              {{ item.num }}
              <span v-if="item.percent">({{ item.percent }})</span>
            </div>
            <div class="item-progress" :style="{ width: item.percent }"></div>
          </div>
        </div>
        <div class="vote-title">{{ postsDetail.vote.nums }}人参与投票</div>
      </div>

      <!-- 付费查看(帖子) -->
      <div
        class="community-article-paid-content f-d-c f-j-a-c"
        v-if="
          type == 1 &&
          postsDetail.pay_obj &&
          postsDetail.pay_obj.pay_type > -1 &&
          !postsDetail.pay_obj.is_payd
        "
      >
        <!-- {{ postsDetail.pay_obj.credit }} -->
        <span
          >需付费 {{ postsDetail.pay_obj.price }} 余额查看
          <span v-if="postsDetail.pay_obj.words_percent < 100">{{
            `余下${100 - postsDetail.pay_obj.words_percent}%内容`
          }}</span>
        </span>
        <div
          class="community-btn-class community-btn-green"
          @click="openPayPop(1)"
        >
          付费查看
        </div>
      </div>

      <!-- 付费内容(帖子) -->
      <div
        class="community-article-paid-content"
        v-if="
          type == 1 &&
          postsDetail.pay_obj &&
          postsDetail.pay_obj.pay_type > -1 &&
          postsDetail.pay_obj.is_payd &&
          postsDetail.pay_obj.hidden
        "
      >
        <span v-html="postsDetail.pay_obj.hidden"></span>
      </div>

      <!-- 图片九宫格(帖子) -->
      <div
        class="community-article-imgs flex"
        v-if="postsDetail.images && postsDetail.images.length && type == 1"
      >
        <div
          class="f-j-a-c"
          v-for="(item, index) in postsDetail.images"
          :key="index"
        >
          <el-image
            :src="item.img_url + '?imageMogr2/thumbnail/300x/format/webp/interlace/1'"
            fit="cover"
            :preview-src-list="previewSrcList"
            :initial-index="initialIndex"
            @click="initialIndex = index"
            :preview-teleported="true"
            :hide-on-click-modal="true"
          >
          </el-image>
        </div>
      </div>

      <!-- 图片(回复) -->
      <div
        class="community-article-imgs flex"
        v-if="postsDetail.comment_img_url && type == 2"
      >
        <div class="f-j-a-c">
          <el-image :src="postsDetail.comment_img_url" fit="cover"> </el-image>
        </div>
      </div>

      <!-- 视频(帖子) -->
      <div
        class="community-article-video-box"
        v-if="type == 1 && postsDetail.video && postsDetail.video.video_url"
      >
        <div class="community-article-video-content">
          <div class="community-article-video">
            <video
              :src="postsDetail.video.video_url"
              :poster="postsDetail.video.video_thumb_url"
              ref="videoRef"
              :controls="showPlayIcon ? false : true"
              @ended="videoEnd"
              preload="metadata"
            ></video>

            <div class="video-mask" v-show="showPlayIcon"></div>

            <img
              class="video-play"
              src="@/assets/image/icon-bf@2x.webp"
              alt=""
              @click="videoPlay"
              v-show="showPlayIcon"
            />
            <div class="video-info f-j-sb-a-c" v-show="showPlayIcon">
              <span>
                <!-- 1.5W人观看 -->
              </span>
              <span>{{ postsDetail.video.duration || "00:00" }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 附件 -->
      <div
        v-if="postsDetail.files && postsDetail.files.length"
        style="width: 100%"
      >
        <div
          class="community-article-file f-j-sb-a-c"
          v-for="(item, index) in postsDetail.files"
          :key="index"
        >
          <div class="f-a-c ellipsis">
            <svg-icon name="icon-file" class="svg-icon"></svg-icon>
            <div class="ellipsis">
              <span class="ellipsis">{{ item.name }}</span>
            </div>
          </div>

          <div class="file-btn-box f-a-c">
            <span v-if="item.is_pay > 0" @click="openPayPop(1)">解锁</span>

            <div v-else class="f-a-c">
              <div class="f-a-c" @click="fileDownload(item)">
                <svg-icon name="icon-xiazai" class="svg-icon"></svg-icon>
                <span>下载文件</span>
              </div>

              <div class="f-a-c" @click="copyData(item.url)">
                <svg-icon name="icon-lianjie-file" class="svg-icon"></svg-icon>
                <span>复制链接</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 标签(帖子) -->
      <div class="community-article-tags flex" v-if="type == 1">
        <!-- #话题 -->
        <div
          class="community-article-tags-item f-a-c"
          v-if="postsDetail.tags"
          v-for="(item, index) in postsDetail.tags"
          :key="index"
          @click="toPostsDetail(item)"
        >
          <svg-icon class="svg-icon" name="icon-bq-huati"></svg-icon>
          <span>{{ item.tags_name }}</span>
        </div>

        <!-- #圈子 -->
        <div class="community-article-tags-item f-a-c" @click="toCircleDetail">
          <svg-icon class="svg-icon" name="icon-bq-huati(1)"></svg-icon>
          <span>{{ postsDetail.circle_name }}</span>
        </div>
      </div>

      <!-- 更多操作 -->
      <div class="community-article-bottom f-j-sb-a-c">
        <div class="community-article-bottom-left f-a-c">
          <!-- 分享(帖子) -->
          <div
            class="f-a-c community-article-bottom-more-pop-box"
            v-if="type == 1"
          >
            <svg-icon
              class="svg-icon"
              name="send"
              @click="shareCommunity"
            ></svg-icon>
            <!-- <span>13</span> -->
            <!-- <div class="community-article-pop f-j-a-c" v-if="true">
              <svg-icon class="svg-icon" name="icon-lianjie"></svg-icon>
              <div>复制链接</div>
            </div> -->
          </div>

          <!-- 评论 -->
          <div class="f-a-c" @click="commentClick">
            <svg-icon
              class="svg-icon"
              name="icon-pl"
              v-show="!postsDetail.showComment"
            ></svg-icon>
            <svg-icon
              class="svg-icon"
              name="icon-pl-yx"
              v-show="postsDetail.showComment"
            ></svg-icon>
            <span :class="{ 'comment-active': postsDetail.showComment }">
              {{ isReply ? "" : postsDetail.comment_count }}
            </span>
          </div>

          <!-- 点赞 -->
          <div class="f-a-c" @click="postPostsLike">
            <svg-icon
              class="svg-icon"
              name="icon-dz"
              v-if="!postsDetail.is_like"
            ></svg-icon>
            <svg-icon class="svg-icon" name="icon-dz-yx" v-else></svg-icon>
            <span :class="{ 'like-active': postsDetail.is_like }">{{
              postsDetail.like_count || 0
            }}</span>
          </div>
        </div>

        <div class="community-article-bottom-right f-a-c">
          <!-- 充电(帖子) -->
          <div class="f-a-c" v-if="type == 1" @click="openPayPop(0)">
            <svg-icon
              class="svg-icon"
              name="icon-chongdian-yx"
              v-if="payPopType == 0 && payPopIsOpen"
            ></svg-icon>
            <svg-icon class="svg-icon" name="icon-chongdian" v-else></svg-icon>

            <span :class="{ 'comment-active': payPopType == 0 && payPopIsOpen }"
              >充电</span
            >
          </div>

          <!-- 更多 -->
          <!-- <div
            class="community-article-bottom-more community-article-bottom-more-pop-box"
            v-ClickOutside="
              () => {
                postsDetail.showMorePop = false;
              }
            "
          >
            <svg-icon
              class="svg-icon"
              name="icon-gd"
              v-show="!postsDetail.showMorePop"
              @click="postsDetail.showMorePop = !postsDetail.showMorePop"
            ></svg-icon>

            <svg-icon
              class="svg-icon"
              name="icon-gd2"
              v-show="postsDetail.showMorePop"
              @click="postsDetail.showMorePop = !postsDetail.showMorePop"
            ></svg-icon>

            <div class="community-article-pop" v-show="postsDetail.showMorePop">
              <div
                class="community-article-item f-j-a-c"
                v-for="(item, index) in moreOperationsList"
                :key="index"
                @click="moreOperationClick(item, index)"
              >
                <svg-icon class="svg-icon" :name="item.icon"></svg-icon>
                <div>{{ item.title }}</div>
              </div>
            </div>
          </div> -->
        </div>
      </div>

      <!-- 内层回复 -->
      <div class="community-reply" v-if="type == 2 && postsDetail.child">
        <commentItem
          v-for="(item, index) in postsDetail.child"
          :key="index"
          :postsDetail="item"
          :type="2"
          :isReply="true"
          :commentIndex="index"
          @sendConfirm="childSendConfirm"
        ></commentItem>

        <!-- 更多回复 -->
        <div class="reply-more-title" v-if="!postsDetail.child_is_last_page">
          <span @click="getMorePostsDetailChild">
            {{ hasMore ? "点击加载更多评论" : "" }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
  ref,
  watch,
} from "vue";
import {
  userVote,
  postsLike,
  followNow,
  commentByCommentId,
  commentLikeAdd,
} from "@/axios/community.js";
import userAvatar from "@/components/userAvatar.vue";
import { ElMessage } from "element-plus";
import { formatDuration, copyData } from "@/utils/common.js";
import ClickOutside from "element-plus/lib/directives/click-outside/index";
import rechargePop from "../views/community/components/rechargePop.vue";
import reboundBoxPop from "../views/community/components/reboundBoxPop.vue";
import communityReporting from "@/components/communityReporting.vue";
import { postsDetail } from "../axios/community";
import axios from "axios";
export default defineComponent({
  name: "commentItem",
  directives: { ClickOutside },
  emits: [
    "updateItem",
    "videoPlay",
    "videoEndPlay",
    "commentClick",
    "sendConfirm",
    "voteUpdate",
    "followNowUpdate",
  ],
  components: {
    userAvatar,
    rechargePop,
    reboundBoxPop,
    communityReporting,
  },
  props: {
    type: {
      type: [Number, String],
      default: 1,
    }, //组件类型 1帖子 2回复
    postsDetail: {
      type: Object,
      default: () => {},
      // default:{}
    }, //内容
    isReply: {
      type: Boolean,
      default: false,
    }, //是否为评论回复组件
    commentIndex: {
      type: Number,
      default: 0,
    }, //当前评论下标
    videoIsPlay: {
      type: Boolean,
      default: false,
    }, //当前元素视频是否在播放
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();

    let commentTextBox = ref(null); //内容标题元素

    let videoRef = ref(null); //视频元素

    let payPopRef = ref(null); //付费弹框

    let reboundBoxPopRef = ref(null); //回复弹框

    let communityReportingPopRef = ref(null); //举报弹框

    let data = reactive({
      replyValue: "", //输入框
      showMore: false, //阅读全文
      isOverFlow: false, //是否超出3行
      showPlayIcon: true, //显示播放按钮
      payPopType: 0, //支付弹框类型 0充电 1付费
      payPopIsOpen: false, //支付弹框是否打开了
      moreOperationsList: [
        {
          title: "举报该内容",
          icon: "icon-jubao",
        },
        // {
        //   title: "通过该内容",
        //   icon: "icon-tongguo",
        // },
        // {
        //   title: "驳回该内容",
        //   icon: "icon-bohui",
        // },
      ],
      page: 1, //内层评论分页
      hasMore: true, //是否还有下一页
      initialIndex: 0, //预览图片初始下标
    });

    // 用户信息
    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });

    // 图片预览列表
    let previewSrcList = computed(() => {
      if (
        props.postsDetail.images &&
        props.postsDetail.images.length &&
        props.type == 1
      ) {
        return props.postsDetail.images.map((item) => item.img_url);
      } else {
        return [];
      }
    });

    // sendConfirm
    // 回复消息回调
    let sendConfirm = () => {
      emit("sendConfirm");
    };

    // 子组件回复成功
    let childSendConfirm = () => {
      emit("sendConfirm");
    };

    // 替换mini-emoji标签的函数
    let replaceMiniEmoji = (match, alt, emoji, width, height) => {
      return `<img src="${emoji}" alt="${alt}" width="${width}" height="${height}" style="vertical-align:bottom;display:inline-block;" />`;
    };

    // 帖子标题
    let commentText = computed(() => {
      let text = "";
      // 需要付费/未付费
      if (
        props.postsDetail &&
        props.postsDetail.pay_obj &&
        props.postsDetail.pay_obj.pay_type > -1 &&
        !props.postsDetail.pay_obj.is_payd
      ) {
        text = props.postsDetail.posts_content;
      } else if (props.type == 2) {
        // 回复
        text = props.postsDetail.comment_content;
      } else {
        // 无需付费/已付费
        text = props.postsDetail.posts_content_origin;
      }

      let result = text
        .replace(/(<a\s+href="[^"]*">)/g, " 🔗$1")
        .replace(
          /(<a\s+[^>]*)(>)/g,
          "$1 style='color: #65c8dc;cursor: pointer;text-decoration: none;' target='_blnk' $2"
        ); //处理a标签样式

      // 替换表情
      let emojiRegex =
        /<mini-emoji\s+alt="(\[[\s\S]+?\])"\s+emoji="([\s\S]+?)"\s+width="(\d+)"\s+height="(\d+)"\s*><\/mini-emoji>/g;
      result = result.replace(emojiRegex, replaceMiniEmoji);

      // let textContent = text.replace(/<[^>]+>/g, ""); //清除标签只获取内容
      return result;
    });

    // 投票
    // position: 3
    // vote_id: 2
    let postUserVote = (vote, voteItem) => {
      if(!userInfo.value) {
        return ElMessage.warning("请先登录")
      };
      userVote({
        vote_id: vote.id,
        position: voteItem.p,
      }).then((res) => {
        let resultObj = res.data;
        resultObj.commentIndex = props.commentIndex;
        voteItem.selected = true;
        emit("voteUpdate", resultObj);
        ElMessage.success("投票成功!");
      });
    };

    // 关注/取消关注
    let postFollowNow = () => {
      if(!userInfo.value) {
        return ElMessage.warning("请先登录")
      };


      followNow({
        posts_user_id: props.postsDetail.user.id,
      }).then((res) => {
        props.postsDetail.is_follow_user = !props.postsDetail.is_follow_user;
        ElMessage.success(
          props.postsDetail.is_follow_user ? "关注成功" : "取消关注"
        );
        emit("followNowUpdate", {
          id: props.postsDetail.user.id,
          is_follow_user: props.postsDetail.is_follow_user,
        });
      });
    };

    // 点赞 /取消点赞
    let postPostsLike = () => {
      if(!userInfo.value) {
        return ElMessage.warning("请先登录")
      };
      // postsLike为帖子点赞 / commentLikeAdd 评论点赞
      let fn = props.type == 2 ? commentLikeAdd : postsLike;
      let parames =
        props.type == 2
          ? { comment_id: props.postsDetail.id }
          : { posts_id: props.postsDetail.id };
      fn(parames).then((res) => {
        props.postsDetail.is_like = !props.postsDetail.is_like;
        if (props.postsDetail.is_like) {
          props.postsDetail.like_count += 1;
        } else {
          props.postsDetail.like_count -= 1;
        }
      });
    };

    // 分享
    let shareCommunity = () => {
      
      let originUrl = window.location.origin;
      copyData(originUrl + "/#/pages/sticky/sticky?id=" + props.postsDetail.id);
    };

    // 评论图标点击
    let commentClick = () => {
      // // 如果组件为帖子 则展开帖子外层评论 // 如果组件为回复 则展开回复输入框
      if (props.type == 1) {
        props.postsDetail.showComment = !props.postsDetail.showComment;
      } else {
        reboundBoxPopRef.value.open();
      }
      emit("commentClick");
    };

    // 获取视频时长
    let getVideoDuration = () => {
      let video = videoRef.value;
      props.postsDetail.video.duration = formatDuration(video.duration);
    };

    // 设置内容是否超过3行
    let setIsOverFlow = () => {
      const element = commentTextBox.value;
      const height = element.offsetHeight;
      const lineHeight = parseInt(getComputedStyle(element).lineHeight);
      const lineCount = Math.round(height / lineHeight);
      // console.log("行数：", lineCount);
      if (lineCount > 3) {
        data.isOverFlow = true;
      }
    };

    // 视频点击播放
    let videoPlay = () => {
      setTimeout(() => {
        videoRef.value.play();
      }, 500);

      data.showPlayIcon = false;
    };

    // 视频播放完
    let videoEnd = () => {
      data.showPlayIcon = true;
    };

    // 视频暂停
    let videoPause = () => {
      data.showPlayIcon = true;
      videoRef.value.pause();
    };

    // 打开充电/ 付费弹框
    let openPayPop = (type) => {
      if(!userInfo.value) {
        return ElMessage.warning("请先登录")
      };
      // props.postsDetail.pay_obj.is_payd=true;
      // let obj = JSON.parse(JSON.stringify(props.postsDetail));
      // obj.pay_obj.is_payd=true;
      // emit("updateItem",obj);
      // return
      // store.dispatch("updateUserInfo");
      data.payPopType = type;
      payPopRef.value.open();
    };

    // 下载文件
    let fileDownload = (file) => {
      let fileType = file.url.split(".").slice(-1)[0].toLowerCase();
      if (fileType == "pdf") {
        downloadPdfFile(file);
      } else {
        window.open(file.url, "_blank");
      }
    };

    // 下载pdf
    let downloadPdfFile = async (file) => {
      const response = await axios({
        url: file.url,
        method: "GET",
        responseType: "blob", // 必须指定为blob类型才能下载
      });
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", file.name);
      document.body.appendChild(link);
      link.click();
    };

    // 支付成功回调
    let paySuccess = (obj) => {
      emit("updateItem", obj);
    };

    // 用户头像点击 前往用户详情
    let toUserDetailCommunity = () => {
      if(!userInfo.value) {
        return ElMessage.warning("请先登录")
      };
      router.push({
        path: "/pages/user/user",
        query: {
          id: props.postsDetail.user.id,
        },
      });
    };

    // 前往圈子详情
    let toCircleDetail = () => {
      if(!userInfo.value) {
        return ElMessage.warning("请先登录")
      };
      router.push({
        path: "/pages/circle/list",
        query: {
          id: props.postsDetail.circle_id
            ? props.postsDetail.circle_id
            : props.postsDetail.circle.id,
        },
      });
    };

    // 前往话题详情
    let toPostsDetail = (item) => {
      if(!userInfo.value) {
        return ElMessage.warning("请先登录")
      };
      router.push({
        path: "/pages/tags/tags",
        query: {
          id: item.id,
        },
      });
    };

    // 点击展开获取更多内层评论
    let getMorePostsDetailChild = () => {
      if (!data.hasMore) return;
      commentByCommentId({
        page: data.page,
        comment_id: props.postsDetail.id,
        begin_id: props.postsDetail.child_current_max_id,
      }).then((res) => {
        let resultData = res.data;
        resultData.data.forEach((item) => {
          props.postsDetail.child.push(item);
        });
        data.hasMore =
          resultData.data && resultData.data.length >= resultData.per_page;
        if (data.hasMore) data.page++;
      });
    };

    // 监听元素交叉事件回调
    let observerListenCallback = (el) => {
      if (!el.isIntersecting && props.videoIsPlay) {
        videoPause();
      }
    };

    // 创建元素交叉监听器
    const observer = new IntersectionObserver(observerListenCallback, {
      delay: 500,
    });

    // 开始监听视频元素
    let observerListen = () => {
      observer.observe(videoRef.value);
    };
    // 卸载视频元素监听
    let unobserverListen = () => {
      observer.unobserve(videoRef.value);
    };

    // 视频播放回调
    let videoPlayHandler = () => {
      // console.log("视频播放了");
      emit("videoPlay", props.commentIndex);
    };

    // 视频暂停/播放完成回调
    let videoEndPlayHandler = () => {
      // console.log("视频停止播放")
      emit("videoEndPlay", props.commentIndex);
    };

    // 更多操作点击
    let moreOperationClick = (item, index) => {
      communityReportingPopRef.value.open();
      props.postsDetail.showMorePop = false;
    };

    onMounted(() => {
      props.postsDetail.showMorePop = false; //举报弹框
      props.postsDetail.showReplyInput = false; //回复输入弹框
      proxy.$nextTick(() => {
        setIsOverFlow(); // 判断行数是否超出3行
        // 判断内容是否包含视频 /获取视频时长
        if (props.postsDetail.video && props.postsDetail.video.video_url) {
          observerListen(); //监听视频是否在视图
          videoRef.value.addEventListener("loadedmetadata", getVideoDuration); //监听视频初始化完成 获取视频时长
          videoRef.value.addEventListener("play", videoPlayHandler); //监听视频播放事件
          videoRef.value.addEventListener("pause", videoEndPlayHandler); //监听视频暂停事件
          videoRef.value.addEventListener("ended", videoEndPlayHandler); //监听视频播放完事件
        }
      });
    });

    onUnmounted(() => {
      if (videoRef.value) {
        videoRef.value.removeEventListener("loadedmetadata", getVideoDuration); //卸载的时候取消监听 防止内存泄漏
        videoRef.value.removeEventListener("play", videoPlayHandler); //卸载视频播放监听
        videoRef.value.removeEventListener("pause", videoEndPlayHandler); //卸载视频暂停监听
        videoRef.value.removeEventListener("ended", videoEndPlayHandler); //卸载视频播放完监听
        unobserverListen(); //卸载视频交叉监听
      }
    });

    return {
      previewSrcList,
      shareCommunity,
      toUserDetailCommunity,
      getMorePostsDetailChild,
      moreOperationClick,
      communityReportingPopRef,
      postFollowNow,
      toCircleDetail,
      toPostsDetail,
      childSendConfirm,
      sendConfirm,
      reboundBoxPopRef,
      videoPause,
      paySuccess,
      fileDownload,
      copyData,
      payPopRef,
      openPayPop,
      commentClick,
      postPostsLike,
      videoEnd,
      videoPlay,
      videoRef,
      postUserVote,
      commentTextBox,
      commentText,
      userInfo,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
// 按钮公用样式
.community-btn-class {
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;

  &:active {
    opacity: 0.7;
  }
}
.community-btn-default {
  border: 1px solid #65c8dc;
  color: #65c8dc;
}
.community-btn-green {
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  color: #ffffff;
}
.community-btn-disabled {
  opacity: 0.7;
}

// 一级评论边框
.community-article-item-top-border {
  &::after {
    content: "";
    width: calc(100% - 40px);
    height: 0.5px;
    position: absolute;
    top: 0;
    left: 20px;
    background: #ececec;
  }
}

// 评论下边距
.community-article-item-comment-padding {
  padding: 20px 20px 0px !important;
}

.community-article-item {
  padding: 20px;
  position: relative;

  .community-article-content {
    flex: 1;
    // padding-left: 20px;
    .community-article-user-info {
      .community-article-user-info-name {
        padding-bottom: 6px;
        > span {
          font-size: 14px;
          color: #000000;
          font-weight: bold;
          // padding-right: 10px;
        }
        .user-info-to-name {
          color: #06a7fe;
          margin-left: 5px;
        }
        .svg-icon {
          width: 20px;
          height: 20px;
        }
      }
      .community-btn-class {
        padding: 5px 0px;
        border-radius: 6px;
        width: 60px;
      }
      .community-btn-default {
        border-color: #ececec;
        color: #000000;
        &:active {
          opacity: 1;
        }
      }
    }
    //   ip地址
    .community-article-user-ip {
      font-size: 12px;
      color: #656f79;
      > div {
        padding-left: 10px;
        .svg-icon {
          width: 12px;
          height: 12px;
        }
      }
    }

    //   帖子内容文本
    .community-article-text {
      font-size: 14px;
      line-height: 20px;
      padding-top: 10px;
      width: 100%;
      word-wrap: break-word;
      word-break: break-all;
      // max-height: 4em;
      // overflow: hidden;
      /*行首缩进字符数，值为[(截取行数-1)*尾部留空字符数]*/

      .link-text {
        color: #65c8dc;
        cursor: pointer;
        text-decoration: none;
      }
      :deep(img) {
        // width: 200px !important;
        // height: 200px !important;
        max-width: 500px !important;
        display:block;
      }
      :deep(figure) {
        // width: 200px !important;
        // height: 200px !important;
      }
      :deep(p) {
        white-space: pre-line;
      }
      :deep(video) {
        max-width:600px;
        display:block;
        margin-top:10px;
        
      }
      .show-more-text {
        color: #65c8dc;
        cursor: pointer;
        line-height: 20px;
        // margin-left: 10px;
      }
    }
  }

  // 投票内容
  .community-vote-box {
    .vote-list {
      margin-top: 20px;
      .vote-item {
        position: relative;
        height: 32px;
        border-radius: 6px;
        border: 1px solid #ececec;
        margin-bottom: 10px;
        overflow: hidden;
        cursor: pointer;
        .vote-item-title {
          font-size: 14px;
          color: #000000;
          padding-left: 20px;
          position: relative;
          z-index: 2;

          .svg-icon {
            width: 16px;
            height: 16px;
            margin-left: 10px;
          }
        }

        .vote-item-num {
          font-size: 12px;
          color: #656f79;
          padding-right: 20px;
          position: relative;
          z-index: 2;
        }

        .item-progress {
          height: 100%;
          // width: 100%;
          position: absolute;
          left: 0;
          top: 0;
          background: #f5f6f7;
        }
      }

      .vote-item-active {
        border-color: #64c8dc;
        .vote-item-title > span {
          color: #64c8dc;
        }
        .vote-item-num {
          color: #64c8dc;
        }
        .item-progress {
          background: rgba(100, 200, 220, 0.12);
        }
      }
    }

    .vote-title {
      font-size: 12px;
      color: #656f79;
    }
  }

  // 付费内容
  .community-article-paid-content {
    background: #f5f6f7;
    border-radius: 10px;
    margin-top: 10px;
    padding: 10px;

    > span {
      color: #656f79;
      font-size: 14px;
      padding-bottom: 10px;
    }
  }

  // 图片九宫格
  .community-article-imgs {
    margin-top: 15px;
    width: 510px;
    flex-wrap: wrap;
    > div {
      width: 160px;
      height: 160px;
      border-radius: 10px;
      overflow: hidden;
      margin: 0 10px 10px 0;
      cursor: pointer;
      > .el-image {
        width: 100%;
        height: 100%;
        transition: all 0.3s;
      }
      &:hover {
        > .el-image {
          transform: scale(1.1);
        }
      }
    }
  }

  // 视频w
  .community-article-video-box {
    max-width: 700px;
    width: 100%;
    margin-top: 15px;
  }
  .community-article-video-content {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
  }
  .community-article-video {
    background: #000000;
    border-radius: 10px;
    position: absolute;
    width: 100%;
    height: 100%;

    // aspect-ratio: 16 / 9;
    // aspect-ratio: 1 / 1;

    > video {
      border-radius: 10px;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .video-mask {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      position: absolute;
      top: 0;
      left: 0;
    }

    .video-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      cursor: pointer;
    }
    .video-info {
      position: absolute;
      bottom: 15px;
      padding: 0 20px;
      color: #ffffff;
      font-size: 14px;
      width: 100%;
    }
  }

  // 附件
  .community-article-file {
    height: 40px;
    border-radius: 10px;
    background: #f3f4f5;
    padding: 0 20px;
    margin-top: 10px;
    > div:first-child {
      font-size: 14px;
      flex: 1;
      // max-width: 260px;
      > div {
        flex: 1;
        > span {
          display: block;
          max-width: 260px;
        }
      }
      .svg-icon {
        width: 26px;
        height: 26px;
        margin-right: 10px;
      }
    }

    .file-btn-box {
      font-size: 14px;

      > span {
        cursor: pointer;
        color: #64c8dc;
      }
      > div > div {
        color: #656f79;
        margin-left: 20px;
        cursor: pointer;
        width: 80px;
        .svg-icon {
          width: 20px;
          height: 20px;
          margin-right: 2px;
        }
      }
    }
  }

  // 标签
  .community-article-tags {
    flex-wrap: wrap;
    .community-article-tags-item {
      cursor: pointer;
      border-radius: 30px;
      // border-radius: 91px 91px 91px 91px;
      opacity: 1;
      border: 1px solid #ececec;
      padding: 7px 10px;
      font-size: 12px;
      color: #000000;
      margin: 10px 10px 0 0;
      .svg-icon {
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
    }
  }

  // 底部更多
  .community-article-bottom {
    color: #656f79;
    font-size: 14px;
    padding-top: 20px;

    .svg-icon {
      width: 20px;
      height: 20px;
      margin-right: 6px;
    }

    .community-article-bottom-left {
      width: 50%;
      > div {
        margin-right: 50px;
        cursor: pointer;

        .like-active {
          color: #f65c8a;
        }
        .comment-active {
          color: #64c8dc;
        }
      }
    }

    .community-article-bottom-right {
      > div {
        cursor: pointer;

        .comment-active {
          color: #64c8dc;
        }
      }
      > div:not(:last-child) {
        margin-right: 30px;
      }
    }

    .community-article-bottom-more-pop-box {
      position: relative;
      .community-article-pop {
        position: absolute;
        width: 130px;
        padding: 10px 0px;
        background: #ffffff;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        left: 50%;
        top: 29px;
        transform: translateX(-50%);
        z-index: 30;
        cursor: pointer;

        .community-article-item {
          font-size: 14px;
          color: #656f79;
          padding: 10px 0;
          &:hover {
            color: #64c8dc;
          }
          .svg-icon {
            width: 16px;
            height: 16px;
          }
        }
      }
    }
  }

  //   回复
  .community-reply {
    background: #f8f8f8;
    border-radius: 10px;
    // margin-top: 20px;
    margin: 20px 0;
  }

  //更多回复
  .reply-more-title {
    font-size: 14px;
    color: #06a7fe;
    margin-top: 10px;
    text-align: center;
    padding-bottom: 20px;
    > span {
      cursor: pointer;
    }
  }
}
</style>
